<template>
  <div class="nav-container">
    <div class="logo-area">
      <img src="@/assets/logo.png" alt="Logo">
    </div>
    
    <el-menu
      :default-active="activeIndex"
      class="el-menu-enhanced"
      background-color="#1f2d3d"
      text-color="#b7c0cd"
      active-text-color="#20a0ff"
      router
    >
      <el-menu-item index="/dashboard" class="menu-item">
        <el-icon><HomeFilled /></el-icon>
        <span class="menu-text">工作台</span>
      </el-menu-item>
      
      <el-submenu index="2" class="submenu">
        <template #title>
          <el-icon><User /></el-icon>
          <span class="menu-text">个人中心</span>
        </template>
        <el-menu-item index="/profile">我的资料</el-menu-item>
        <el-menu-item index="/settings">账号设置</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  User,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const activeIndex = ref(route.path)
</script>

<style scoped>
.nav-container {
  height: 100vh;
  background: linear-gradient(180deg, #1f2d3d 0%, #1a2532 100%);
}

.logo-area {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.el-menu-enhanced {
  border-right: none;
}

.menu-item {
  margin: 8px 0;
  border-radius: 4px;
}

.submenu {
  margin: 8px 0;
}

.menu-text {
  margin-left: 10px;
  font-weight: 500;
}
</style>